<template>
    <div>

        <el-row>
            <el-col :span="12">
                <el-row>
                    <div id="columnar"></div>
                </el-row>
                <el-row>
                    <div id="polyline1"></div>
                </el-row>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <div id="sector"></div>
                </el-row>
                <el-row>
                    <div id="polyline2"></div>
                </el-row>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    export default {
        name: "statistics",
        data() {
            return {
                //bug提交数据
                submitBugData: [],
                submitBugName: [],
                submitBugValue: [],
                //    bug解决统计
                solveBugValue: [],
                solveBugName: [],
                submitBugNumber: {
                    names: [],
                    value: []
                },
                solveBugNumber: {
                    names: [],
                    value: []
                },
            }
        },
        methods: {
            drawChart() {
                //柱状图
                let columnar = this.$echarts.init(document.getElementById("columnar"));
                let columnarOption = {
                    title: {
                        text: "近六天提交Bug数量",
                        left: 'center'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        data: this.submitBugName,
                    },
                    yAxis: {
                        minInterval: 1 //纵坐标单元大小
                    },
                    series: [{
                        name: '提交数量',
                        type: "bar",
                        data: this.submitBugValue,
                        barWidth: 40,//柱图宽度
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                //这里是重点
                                color: function (params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#346089', '#8e8a67', '#aaea48'];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    formatter: "{b}",
                                    show: false,
                                },
                            }
                        },
                    }]
                };
                columnar.setOption(columnarOption);

                //扇形图
                let sector = this.$echarts.init(document.getElementById("sector"));

                let sectorOption = {
                    title: {
                        text: '近六天解决Bug数量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                    },
                    series: [
                        {
                            name: '解决bug数',
                            type: 'pie',
                            radius: '50%',
                            data: this.solveBugValue,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                sector.setOption(sectorOption);


                //折线图1
                let polyline1 = this.$echarts.init(document.getElementById("polyline1"));

                let polylineOption1 = {
                    title: {
                        text: '提交Bug总数量',
                        left: 'center',
                    },
                    xAxis: {
                        type: 'category',
                        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data: this.submitBugNumber.names,

                    },
                    yAxis: {
                        type: 'value',
                        min: 1
                    },
                    series: [{
                        //data: [20, 32, 11, 14, 10, 30, 20],
                        data: this.submitBugNumber.value,
                        type: 'line',
                        smooth: true
                    }]
                };
                polyline1.setOption(polylineOption1);

                //折线图2
                let polyline2 = this.$echarts.init(document.getElementById("polyline2"));

                let polylineOption2 = {
                    title: {
                        text: '解决Bug总数量',
                        left: 'center',
                    },
                    xAxis: {
                        type: 'category',
                        data: this.solveBugNumber.names,
                        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value',
                        min: 1
                    },
                    series: [{
                        //data: [8, 15, 11, 34, 10, 13, 20],
                        data: this.solveBugNumber.value,
                        type: 'line',
                        smooth: true
                    }]
                };
                polyline2.setOption(polylineOption2);
            },
            //获取统计数据(请求异步变成同步)
            async getStatisticData() {
                var res = await this.$get("/statistics/submitBugCount");
                return res;
            },
            async getStatisticSolve() {
                var res = await this.$get("/statistics/solveBugCount");
                return res;
            },

            //提交bug的所有数量
            async getSubmitBug() {
                var res = this.$get("/statistics/getSubmitBugNumber");
                return res;
            },

            //解决bug的所有数量
            async getSolveBug() {
                var res = this.$get("/statistics/getSolveBugNumber");
                return res;
            },

            submitBug() {
                this.getSubmitBug().then(res => {
                    this.submitBugNumber.names = res.data.names;
                    this.submitBugNumber.value = res.data.data;
                })
            },

            solveBug() {
                this.getSolveBug().then(res => {
                    this.solveBugNumber.names = res.data.names;
                    this.solveBugNumber.value = res.data.data;
                })
            },

            solveBugCount() {
                this.getStatisticSolve().then(res => {
                    this.solveBugValue = res.data;
                })
            },
            //数据初始化
            init() {
                this.submitBug();
                this.solveBug();
                this.solveBugCount();
                this.getStatisticData().then(res => {
                    this.submitBugData = res.data;
                    this.submitBugData.forEach(item => {
                        this.submitBugName.push(item.name);
                        this.submitBugValue.push(item.value);
                    });

                    this.drawChart();
                })
            },
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>

    #columnar {
        width: 550px;
        height: 400px;
    }

    #sector {
        width: 550px;
        height: 400px;
    }

    #polyline1 {
        width: 540px;
        height: 480px;
        margin: auto;
    }

    #polyline2 {
        width: 540px;

        height: 480px;
        margin: auto;
    }
</style>